<template>
	<view class="notification-detail">
		<!-- 导航栏 -->
		<u-navbar class="notification-nav" :title="!user?'通知列表':''">
			<view class="user-box">
				<u-avatar class="avatar"
					:src="user.avatar?imageUrl(user.avatar):'/static/platform/avatar/system-avatar.png'"></u-avatar>
				<view class="name">{{user.name}}</view>
			</view>
		</u-navbar>
		<view class="h-full scroll-box" v-if="list.length > 0">
			<scroll-view class="scroll" ref="scrollView" scroll-y="true" :refresher-enabled="refresher"
				:refresher-triggered="triggered" @refresherrefresh="refresh()" @scrolltolower="reachBottom()">
				<notification-detail-list :list="list"></notification-detail-list>
				<u-loadmore :status="loadStatus"></u-loadmore>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import NotificationDetailList from '@/pages/platform/notification/notification-detail-list.vue'
	export default {
		name: "notification-detail",
		props: {},
		components: {
			NotificationDetailList
		},
		data() {
			return {
				queryParam: {
					pageNum: 1,
					pageSize: 10,
					userId: undefined,
					regionId: undefined,
					type: undefined
				},
				user: {},
				list: [],
				total: 0,
				loadStatus: 'loadmore',
				triggered: false,
				refresher: true
			};
		},
		onLoad(options) {
			this.queryParam.type = options.type
			if (options.type === '0') {
				this.queryParam.userId = this.vuex_user.id
			} else if (options.type === '1') {
				this.user.id = options.uid
				if (this.$store.state.region) {
					this.queryParam.regionId = this.$store.state.region.id
				}
			}
			this.init()
		},
		filters: {},
		methods: {
			resetQuery() {
				this.queryParam.pageNum = 1
				this.loadStatus = "loadmore"
			},
			refresh() {
				this.triggered = true
				this.resetQuery()
				this.getNotificationList()
				setTimeout(() => {
					// 停止下拉刷新
					this.triggered = false;
				}, 500)
			},
			reachBottom() {
				if (this.loadStatus === "loadmore") {
					this.loadStatus = "loading"
					this.getNextNotificationList()
				}
			},
			getNextNotificationList() {
				this.queryParam.pageNo += 1
				this.$u.api.notificationData.detailList(this.queryParam).then(res => {
					const length = res.data.rows
					if (length > 0) {
						this.list.push(...res.data.rows)
						if (this.list.length === this.total) {
							this.setTimeoutLoadStatus("nomore")
						} else {
							this.setTimeoutLoadStatus("loadmore")
						}
					} else {
						this.setTimeoutLoadStatus("nomore")
					}
				})
			},
			setTimeoutLoadStatus(status) {
				setTimeout(() => {
					this.loadStatus = status
				}, 1000)
			},
			goPostDetail(itemId) {
				let url;
				url = "/pages/platform/post/post-detail?id=" + itemId
				uni.navigateTo({
					url: url
				})
			},
			init() {
				this.getNotificationUser()
				

			},
			getNotificationUser() {
				if (this.queryParam.type === '0') {
					this.user.name = "系统消息"
				} else if (this.queryParam.type === '1') {
					this.$u.api.messageData.messageUserInfo({
						userId: this.user.id
					}).then(res => {
						this.user.name = res.data.name
						this.user.avatar = res.data.avatar
						
					})
				}
				this.getNotificationList()
			},
			getNotificationList() {
				this.$u.api.notificationData.detailList(this.queryParam).then(res => {
					this.list = res.data.rows
					this.total = res.data.total
					if (this.total < this.queryParam.pageSize) {
						this.loadStatus = "nomore"
					}

					this.readNotification()

				})
			},
			readNotification() {
				let ids = []
				this.list.forEach(item => {
					if (!item.isRead) {
						ids.push(item.id)
					}
				})
				if (ids.length > 0) {
					this.$u.api.notificationData.readNotification(ids).then(res => {
						if (res.data) {
							uni.$emit('clearNotification', this.queryParam.type)
						}
					})
				}

			},
			markdownToContent(markdown) {
				return marked(markdown)
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.notification-detail {
		.notification-nav {
			display: flex;
			justify-content: center;
			align-items: center;

			.user-box {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				.avatar {
					padding: 10rpx;
					display: flex;

				}

				.name {
					font-size: 14px;
					font-weight: 700;
				}

			}
		}

		.scroll-box {
			.scroll {
				height: calc(100vh - 100rpx);
			}
		}
	}
</style>